import echarts from 'echarts'
import {deep_clone,merge} from '@/common/tool'
const series_option={
    type: 'radar',
    lineStyle: {
        normal: {
            width: 1,
            opacity: 0.5
        }
    },
    symbol: 'none',
    itemStyle: {
        color: '#F9713C'
    },
    areaStyle: {
        opacity: 0.1
    }
}
const option = {
    backgroundColor: '#161627',
    radar: {
        indicator: [ ],
        shape: 'circle',
        // splitNumber: 5,
        name: {
            textStyle: {
                color: 'rgb(238, 197, 102)'
            }
        },
        splitLine: {
            lineStyle: {
                color: [
                    'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
                    'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
                    'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
                ].reverse()
            }
        },
        splitArea: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(238, 197, 102, 0.5)'
            }
        }
    },
    series: []
};



export default {
    props:['data','attrs'],
    render: function (h) {
        return h('div',{
            ref:'charts',
            style:{
                width:'100%',
                height:'400px'
            }
        })
    },
    mounted(){
        const myChart = echarts.init(this.$refs.charts)
        const keys=[],values=[]
        for (const key in this.data) {
            keys.push({
                name:key,
                max:5
            })
            values.push(this.data[key])
        }
        const _series_option=deep_clone(series_option)
        const _option=deep_clone(option)
        _series_option.data=[values]
        _option.radar.indicator=keys
        _option.series.push(_series_option)
        myChart.setOption(this.attrs?merge(_option,this.attrs):_option);
    }
}